<canvas id="canvas" width="296" height="152"></canvas>
<script>
    function roundRect(ctx, x, y, width, height, radius = 10) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.arcTo(x + width, y, x + width, y + radius, radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
        ctx.lineTo(x + radius, y + height);
        ctx.arcTo(x, y + height, x, y + height - radius, radius);
        ctx.lineTo(x, y + radius);
        ctx.arcTo(x, y, x + radius, y, radius);
        ctx.closePath();
    }

    // 模拟抗锯齿
    function testAntialias(ctx, width, height) {
        // 获取像素数据
        const imgData = ctx.getImageData(0, 0, width, height);
        const data = imgData.data;

        // 二值化阈值
        for (let i = 0; i < data.length; i += 4) {
            // data[i] = R, data[i+1] = G, data[i+2] = B
            // data[i+3] = A
            const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
            if (gray < 138) {
                data[i] = data[i + 1] = data[i + 2] = 0; // 黑
                data[i + 3] = 255;
            } else {
                data[i] = data[i + 1] = data[i + 2] = 255; // 白
                data[i + 3] = 255;
            }
        }

        ctx.putImageData(imgData, 0, 0);
    }

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // 背景白色
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    // ctx.patternQuality="fast"
    // ctx.antialias="none"
    ctx.imageSmoothingEnabled = false; // 开启图像平滑

    // 黑色文字
    ctx.fillStyle = '#000';
    ctx.font = '17px 宋体';
    // ctx.font = '18px 微软雅黑';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('你好宋体' + new Date().toLocaleTimeString(), canvas.width / 2, canvas.height / 2);


    // 绘制边框
    // ctx.lineWidth = 2;         // 边框宽度
    // ctx.strokeStyle = '#000000'; // 边框颜色（黑色）
    // ctx.strokeRect(2, 2, canvas.width - 2 * 2, canvas.height - 2 * 2);

    // 圆角边框
    roundRect(ctx, 2.5, 2.5, canvas.width - 2.5 * 2, canvas.height - 2.5 * 2, 4); // x, y, w, h, r

    ctx.fillStyle = '#fff';  // 填充颜色
    ctx.strokeStyle = '#000'; // 边框颜色
    ctx.lineWidth = 1;
    // ctx.fill();   // 填充
    ctx.stroke(); // 边框

    // testAntialias(ctx,canvas.width,canvas.height)
    // 导出 base64
    window.pngData = canvas.toDataURL('image/png');
</script>


